<template>
  <div>
    <a-select v-model="selectFirst" style="width: 120px" @change="handleFirstChange">
      <a-select-option v-for="item in dictList" :key="item.name" :value="item.name" :disabled="selectSecond && selectSecond === item.name">{{ item.title }}</a-select-option>
    </a-select>
    对比
    <a-select v-model="selectSecond" style="width: 120px" allowClear @change="handleSecondChange" placeholder="请选择">
      <a-select-option v-for="item in dictList" :key="item.name" :value="item.name" :disabled="selectFirst && selectFirst === item.name">{{ item.title }}</a-select-option>
    </a-select>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dictList: [
        { name: 'view', title: '观看次数', tips: 'tips' },
        { name: 'viewCost', title: '观看成本（元）', tips: 'tips' },
        { name: 'cost21', title: '花费（元）', tips: 'tips' },
        { name: 'cost22', title: '互动量', tips: 'tips' },
        { name: 'cost34', title: '互动率', tips: 'tips' },
        { name: 'costa', title: '平均观看时长（秒）', tips: 'tips' },
        { name: 'costb', title: '直播点赞量', tips: 'tips' },
        { name: 'cos1t', title: '直播分享量', tips: 'tips' },
        { name: 'cost2', title: '直播评论量', tips: 'tips' },
        { name: 'cost3', title: '引导进店量', tips: 'tips' },
        { name: 'cost4', title: '引导进店率', tips: 'tips' },
        { name: 'cost5', title: '粉丝关注量', tips: 'tips' },
        { name: 'cost6', title: '成交订单量', tips: 'tips' },
        { name: 'cost7', title: '成交金额', tips: 'tips' },
        { name: 'cost8', title: '收藏宝贝量', tips: 'tips' },
        { name: 'cost9', title: '商品加购数', tips: 'tips' },
        { name: 'cost0', title: '投资回报率', tips: 'tips' },
        { name: 'cost11', title: '预售订单量', tips: 'tips' },
        { name: 'cost12', title: '预售成交金额（元）', tips: 'tips' },
        { name: 'cost13', title: '购物金充值笔数', tips: 'tips' },
        { name: 'cost14', title: '购物金充值金额（元）', tips: 'tips' },
      ],
      selectFirst: 'view',
      selectSecond: undefined
    }
  },
  methods: {
    handleFirstChange () {
    },
    handleSecondChange () {
      console.log(48);
    }
  },
}
</script>

<style lang="less" scoped>
</style>